<%@ include file="includes/include.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<jsp:include page="includes/admin_header.jsp">
  <jsp:param name="pageTitle" value="Update chapter" />
</jsp:include>

<script type="text/javascript" src="/static/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/static/inittinymce.js"></script>

<script type="text/javascript">
  var gtugs = {
    count: 0
  };

  gtugs.addAdministratorRow = function() {
    var administratorsTable = document.getElementById('administratorsTable');
    var emailInputId = 'administrators[' + this.count + '].email';
    var nameInputId = 'administrators[' + this.count + '].name';

    var newRow = core.createElement('tr');
    var nameCell = core.createElement('td');
    var emailCell = core.createElement('td');
    var removeButtonCell = core.createElement('td');
    var nameInput = core.createElement('input', null,
        {id:nameInputId, name:nameInputId});
    var emailInput = core.createElement('input', null,
        {id:emailInputId, name:emailInputId});
    var removeButton = core.createElement('input', null,
        {type:'button', value:'Remove', onclick:function() {
          gtugs.removeAdministratorRow(this);
        }}, {width:'auto'});

    core.appendNode(nameInput, nameCell);
    core.appendNode(nameCell, newRow);
    core.appendNode(emailInput, emailCell);
    core.appendNode(emailCell, newRow);
    core.appendNode(removeButton, removeButtonCell);
    core.appendNode(removeButtonCell, newRow);
    core.appendNode(newRow, administratorsTable);
    this.count++;

    if (this.count == 2) {
      // First row has table headings -- second row has name and email inputs
      var firstRow = administratorsTable.getElementsByTagName('tr')[1];
      var inputs = firstRow.getElementsByTagName('input');
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'button') {
          inputs[i].disabled = null;
          break;
        }
      }
    }
  };

  gtugs.removeAdministratorRow = function(elmt) {
    var administratorsTable = document.getElementById('administratorsTable');
    var form = document.getElementById('chapter');
    var row = elmt.parentNode.parentNode;

    var inputs = row.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
      var match = inputs[i].name.match(/administrators\[(\d)\].*$/);
      if (match) {
        var id = 'administrators[' + match[1] + '].isFlagged';
        var input = core.createElement('input', null,
            {id:id, name:id, type:'hidden', value:true});

        core.appendNode(input, form);
        break;
      }
    }

    administratorsTable.removeChild(row);
    this.count--;

    if (this.count == 1) {
      // First row has table headings -- second row has name and email inputs
      var firstRow = administratorsTable.getElementsByTagName('tr')[1];
      var inputs = firstRow.getElementsByTagName('input');
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'button') {
          inputs[i].disabled = 'disabled';
          break;
        }
      }
    }
  };

  var editor;
  window.onload = function() {
    var form = document.getElementById('chapter');
    var i = 0;

    do {
      var node = form['administrators[' + i + '].name'];
      i++;
    } while (node && i < 10);

    gtugs.count = --i;

    tabberAutomatic();

    // Show "Events" tab by default if t=events is in URL
    if (window.location.toString().indexOf('t=events') != -1) {
      document.getElementById('mainTabs').tabber.tabShow(1);
    }

    editor = tinyMCE.get('description');
  };
</script>

<div id="title">
  <h2 style="color:#333333">Update chapter</h2>
</div>

<div class="tabber" id="mainTabs">
  <div class="tabbertab" title="Info">
    <form:form method="post" commandName="chapter" onsubmit="editor.getContent();">
      <div class="form-block">
        <span class="label">
          Name *
        </span>
        <form:input path="name"/>
        <span class="error">
          <form:errors path="name"/>
        </span>
      </div>

      <c:if test="${model.userService.user.isAdmin}">
        <div class="form-block">
          <span class="label">
            Type
          </span>
          <form:select path="type">
            <form:option value="gtug" label="GTUG"/>
            <form:option value="android" label="Android"/>
          </form:select>
          <span class="error">
            <form:errors path="type"/>
          </span>
        </div>
      </c:if>

      <c:if test="${model.userService.user.isAdmin}">
        <div class="form-block">
          <span class="label">
            Status
          </span>
          <form:select path="status">
            <form:option value="incubating" label="Incubating"/>
            <form:option value="active" label="Active"/>
            <form:option value="inactive" label="Inactive"/>
          </form:select>
          <span class="error">
            <form:errors path="status"/>
          </span>
        </div>
      </c:if>

      <c:if test="${model.userService.user.isAdmin}">
        <div class="form-block">
          <span class="label">
            City
          </span>
          <form:input path="city"/>
          <span class="error">
            <form:errors path="city"/>
          </span>
        </div>

        <div class="form-block">
          <span class="label">
            State
          </span>
          <form:input path="state"/>
          <span class="error">
            <form:errors path="state"/>
          </span>
        </div>

        <div class="form-block">
          <span class="label">
            Country
          </span>
          <form:select path="country" items="${model.countries}" itemLabel="name" itemValue="name" />
          <span class="error">
            <form:errors path="country"/>
          </span>
        </div>
      </c:if>

      <div class="form-block">
        <span class="label">
          Description
        </span>
        <div>
          <form:textarea path="description"/>
        </div>
        <span class="error">
          <form:errors path="description"/>
        </span>
      </div>

      <div class="form-block">
        <span class="label">
          Website URL
        </span>
        <form:input path="website"/>
        <span class="error">
          <form:errors path="website"/>
        </span>
      </div>

      <c:if test="${chapter.name == 'Silicon Valley GTUG'}">
        <div class="form-block">
          <span class="label">
            Meetup.com Group URL Name
          </span>
          <form:input path="meetupGroupUrlName"/>
          <span class="error">
            <form:errors path="meetupGroupUrlName"/>
          </span>
        </div>
      </c:if>

      <div class="form-block">
        <span class="label">
          Mailing list
        </span>
        <form:input path="mailingList"/>
        <span class="error">
          <form:errors path="mailingList"/>
        </span>
      </div>

      <c:if test="${model.userService.user.isAdmin}">
        <div class="form-block">
          <span class="label">
            Administrators *
          </span>
          <table cellpadding="0" cellspacing="0">
            <tbody id="administratorsTable">
              <tr>
                <th>Name</th>
                <th>Email</th>
              </tr>
              <c:forEach items="${chapter.administrators}" varStatus="row">
                <tr>
                  <td>
                    <form:input path="administrators[${row.index}].name"/>
                    <span class="error">
                      <form:errors path="administrators[${row.index}].name"/>            
                    </span>
                  </td>
                  <td>
                    <form:input path="administrators[${row.index}].email"/>
                    <span class="error">
                      <form:errors path="administrators[${row.index}].email"/>            
                    </span>
                  </td>
                  <td>
                    <c:choose>
                      <c:when test="${row.index == 0 && row.last == true}">
                        <input type="button" value="Remove" onclick="gtugs.removeAdministratorRow(this)" style="width:auto" disabled="disabled"/>
                      </c:when>
                      <c:otherwise>
                        <input type="button" value="Remove" onclick="gtugs.removeAdministratorRow(this)" style="width:auto"/>
                      </c:otherwise>
                    </c:choose>
                  </td>
                </tr>
              </c:forEach>
            </tbody>
          </table>
          <input type="button" value="Add administrator" onclick="gtugs.addAdministratorRow()" style="width:auto"/>
        </div>
      </c:if>

      <input type="submit" align="center" value="Submit">&nbsp;
      <a href="/admin" style="font-size:8pt">Back</a>
    </form:form>
  </div>
  <div class="tabbertab" title="Events">
    <ul>
      <c:forEach items="${model.events}" var="event">
        <li style="font-size:10pt"><a href="/admin/updateEvent.jsp?id=<c:out value="${event.id}"/>"><c:out value="${event.name}"/></a></li>
      </c:forEach>
    </ul>
    <div>
      <b>&rarr;</b> <a href="/admin/addEvent.jsp?id=<c:out value="${chapter.id}"/>" class="fancy">Add new event</a>
    </div>
  </div>
</div>

<%@ include file="includes/footer.jsp" %>